<template>
  <VPage>
    <div class="mx-[10px]">
      <el-tabs v-model="activeName" class="tabs" @tab-change="handleChange">
        <el-tab-pane label="商品分类" :name="0"></el-tab-pane>
        <el-tab-pane label="仓库权限" :name="1"></el-tab-pane>
        <el-tab-pane label="字段属性" :name="2"></el-tab-pane>
      </el-tabs>
    </div>
    <template v-if="activeName == 0">
      <Shop :optionsData="optionsDataAll" />
    </template>
    <template v-else-if="activeName == 1">
      <Warehouse :optionsData="optionsDataAll" />
    </template>
    <template v-else>
      <Fields :optionsData="optionsDataAll" />
    </template>
  </VPage>
</template>
<script setup name="List" lang="jsx">
import Shop from "./components/shop/index";
import Warehouse from "./components/warehouse/index";
import Fields from "./components/fields/index";
import { opt } from "./data.js";
import { getMenus } from "@/api/menu";
const activeName = ref(0);
const optionsData = reactive({});
const getMenuData = async () => {
  const { data } = await getMenus({ type: 1 });
  optionsData.menusList = data || [];
};
getMenuData();
const optionsDataAll = computed(() => {
  return {
    ...optionsData,
    ...opt,
  };
});
</script>
<style scoped lang="scss">
:deep(.el-tabs__header) {
  margin: 0;
}
</style>
